<template>
	<div class="login-container">
		<!-- 导航栏 -->
	<van-nav-bar
	class="nav-bar"
	  title="修改密码"
	  left-arrow
	  @click-left="$router.back()"
	/>
	
		<div class="container">
			<van-form   @submit="submit" :validate-first="true" >
				<van-field center 
				
				:rules="[{ required: true, message: '请填写手机号' },{pattern:/^1[3-9]\d{9}$/,message: '请填写正确的手机号'}]"
				placeholder="请输入手机号" name="mobile" v-model="username">
					<template #left-icon>
						<span class="iconfont icon-shouji2"></span>
					</template>
				</van-field>
				<van-field center 
				:rules="[{ required: true, message: '请填写验证码' },{pattern:/^\d{6}$/,message: '验证码格式错误'}]"
				placeholder="请输入验证码" name="code" v-model="vercode">
					<template #left-icon>
						<span class="iconfont icon-yanzhengma"></span>
					</template>
					<template #button>
						<van-button  native-type="button" :disabled="sending" @click="sendSms" class="send-btn" size="mini" color="#07c160">{{vercode_text}}</van-button>
					</template>
				</van-field>
				
				
				<van-field 
				:rules="[{ required: true, message: '请填写密码' },{pattern:/^\w{6,12}$/,message: '密码格式错误'}]"
				center placeholder="请输入密码" name="password"
				type="password" v-model="password">
					<template #left-icon>
						<span class="iconfont icon-icon-mima"></span>
					</template>
				</van-field>
				
				<div style="margin: 30px 30px;"><van-button round block type="primary" size="normal" 
				:square="true" native-type="submit">提交</van-button></div>
			</van-form>
		</div>

		<!-- /登录表单 -->
	</div>
</template>

<script >
	
	let timer = null;
	let time =5;
	export default{
		
		data(){
			return{
				username:'',
				vercode:'',
				password:'',
				sending:false,
				vercode_text:"发送验证码"
			}
		},
		methods:{
			//  发短信
			sendSms(){
				let {username} = this;
				
				//数据校验
				if(!/^1[3-9]\d{9}$/.test(username)){
					this.$toast.fail('手机号码格式错误')
					return 
				}	
			
				
				this.$http.post('/user/sendSms',{
					mobile:username,
					type:"register" // 场景值  
				}).then(res=>{
					console.log(res)
					if(res.code==0){
						this.$toast(`短信已经发送给${res.mobile},请注意查收`);
						
						// 倒计时
						// 倒计时结束  sending 改成false  按钮可以点击了
						
						timer = setInterval(v=>{
							this.vercode_text = time+'s';
							time--;
							if(time<=0){
								this.vercode_text = '再次发送';
								this.sending = false; // 恢复点击
								clearInterval(timer)
								time = 5;
							}
						},1000)
						
					}else{
						this.$toast(res.msg)
						this.sending = false;
						
					}
					
				}).catch(err=>{
					console.log(err)
					if(err&&err.message){
						this.$toast(err.message)
					}
					this.sending = false;
				})
				
			},
			submit(){
				
				
				let {username,vercode,password} = this;
				console.log(username)
				console.log(vercode)
				console.log(password)
				
				
				//数据校验 
				if(!/^1[3-9]\d{9}$/.test(username)){
					this.$toast.fail('手机号码格式错误')
					return 
				}			
				if(!/^\d{6}$/.test(vercode)){
					this.$toast.fail('验证码格式错误')
					return 
				}			
				if(!/^\w{6,12}$/.test(password)){
					this.$toast.fail('密码格式错误')
					return 
				}
				
				this.$http.post('/user/reg',{
					username,
					password,
					vercode
				}).then(res=>{
					console.log(res)
					
					if(res.code==0){
						
						this.$toast(res.msg)

						setTimeout(_=>{
							this.$router.go(-2);//  不用重新登
						},1000)
						
					}else{
						this.$toast.fail(res.msg)
					}
				}).catch(err=>{
					console.log(err)
					
				})
				
				
				
			}
			
		}
		
	}
	
	
	
</script>

<style scoped="scoped">
	/*  自己新建一个class  >>>  */
	.nav-bar >>> .van-icon{
		color: #333;
		font-size: 48px;
	}
</style>
<style scoped lang="scss">
.login-container {
	.send-btn {
		width: auto;
		height: 60px;
		padding: 1px 8px;
		background-color: #ededed;
		.van-button__text {
			font-size: 14px;
		}
	}
	.login-btn-wrap {
		padding: 26px 16px;
		.login-btn {
			background-color: #6db4fb;
			border: none;
			.van-button__text {
				font-size: 15px;
			}
		}
	}
	.link {
		color: #999;
		float: right;
		margin-top: 18px;
	}
}
</style>

